<script lang="ts">
    import { useClassList } from "../utils/useClassList";
    import { useStyle } from "../utils/useStyle";
    import type { ViewProps } from "./View";

    const props: ViewProps = $props();
    const { style, size, children, ...others } = props;
    const classList = $derived(useClassList(props, "cm-view"));
    delete others["class"];
    const newStyle = $derived(useStyle(props, { flex: props.size ? `0 1 ${props.size}` : "" }));
</script>

<div class={classList} style={newStyle} {...others}>
    {@render props.children?.()}
</div>
